<script>
export default {
  data() {
    return {
      institute: {},
      building: {},
      department: {},
      institutes: [],
      buildings: [],
      departments: []
    }
  },
  mounted() {
    const loginUser = this.$loginSession();
    this.institutes = loginUser.institutes
    if (this.institutes.length > 0) {
      this.institute = this.institutes[0]
    }
    this.buildings = loginUser.buildings
    if (this.buildings.length > 0) {
      this.building = this.buildings[0]
    }
    this.departments = loginUser.departments
    if (this.departments.length > 0) {
      this.department = this.departments[0]
    }
  }
}
</script>

<template>
  <el-tabs type="border-card" style="height: 400px" id="basic-info">
    <el-tab-pane label="院所信息" v-if="institutes.length > 0">
      <el-row>
        <el-col :span="16"><img alt="" :src="institute.logo" style="height: 180px;width: 100%;"></el-col>
        <el-col :span="8">
          <div style="border: 1px solid lightgray;border-left: 0;width: 100%;">
            <label style="line-height: 58px;font-size: 40px;color: rgb(47, 156, 249);display: inline-block;">&nbsp;<i class="el-icon-video-camera-solid"/></label>
            <label style="line-height: 20px;font-size: 13px;color: cadetblue;display: inline-block;">
              &nbsp;<i style="color: red;">{{institute.meterNum}}个</i><br>
              &nbsp;<i style="color: black;font-style: normal;">监测单位</i>
            </label>
          </div>
          <div style="border: 1px solid lightgray;border-left: 0;width: 100%;">
            <label style="line-height: 58px;font-size: 40px;color: rgb(47, 156, 249);display: inline-block;">&nbsp;<i class="el-icon-office-building"/></label>
            <label style="line-height: 20px;font-size: 13px;color: cadetblue;display: inline-block;">
              &nbsp;<i style="color: red;">{{institute.buildingNum}}个</i><br>
              &nbsp;<i style="color: black;font-style: normal;">建筑总数</i>
            </label>
          </div>
          <div style="border: 1px solid lightgray;border-left: 0;width: 100%;">
            <label style="line-height: 58px;font-size: 40px;color: rgb(47, 156, 249);display: inline-block;">&nbsp;<i class="el-icon-orange"/></label>
            <label style="line-height: 20px;font-size: 13px;color: cadetblue;display: inline-block;">
              &nbsp;<i style="color: red;">{{institute.areaSize ? institute.areaSize: ''}}</i><br>
              &nbsp;<i style="color: black;font-style: normal;">总建筑面积</i>
            </label>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="height: 120px;overflow: hidden;text-indent: 25px;">
          {{institute.profile}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="line-height: 40px;vertical-align: center;color: gray;">
          <i class="el-icon-location-information"/>{{institute.address}}
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="建筑信息" name="建筑信息" v-if="buildings.length > 0">
      <el-row>
        <el-col :span="16"><img alt="" :src="building.logo" style="height: 180px;width: 100%;"></el-col>
        <el-col :span="8">
          <div style="border: 1px solid lightgray;border-left: 0;width: 100%;">
            <label style="line-height: 58px;font-size: 40px;color: rgb(47, 156, 249);display: inline-block;">&nbsp;<i class="el-icon-video-camera-solid"/></label>
            <label style="line-height: 20px;font-size: 13px;color: cadetblue;display: inline-block;">
              &nbsp;<i style="color: red;">{{building.meterNum}}个</i><br>
              &nbsp;<i style="color: black;font-style: normal;">监测单位</i>
            </label>
          </div>
          <div style="border: 1px solid lightgray;border-left: 0;width: 100%;">
            <label style="line-height: 58px;font-size: 40px;color: rgb(47, 156, 249);display: inline-block;">&nbsp;<i class="el-icon-orange"/></label>
            <label style="line-height: 20px;font-size: 13px;color: cadetblue;display: inline-block;">
              &nbsp;<i style="color: red;">{{building.areaSize}}</i><br>
              &nbsp;<i style="color: black;font-style: normal;">建筑面积</i>
            </label>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="height: 120px;overflow: hidden;text-indent: 25px;">
          {{building.profile}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="line-height: 40px;vertical-align: center;color: gray;">
          <i class="el-icon-location-information"/>{{building.address}}
        </el-col>
      </el-row>
    </el-tab-pane>


    <el-tab-pane label="科室信息" name="科室信息" v-if="departments.length > 0">
      <el-row>
        <el-col :span="16"><img alt="" :src="department.logo" style="height: 180px;width: 100%;"></el-col>
        <el-col :span="8">
          <div style="border: 1px solid lightgray;border-left: 0;width: 100%;">
            <label style="line-height: 58px;font-size: 40px;color: rgb(47, 156, 249);display: inline-block;">&nbsp;<i class="el-icon-video-camera-solid"/></label>
            <label style="line-height: 20px;font-size: 13px;color: cadetblue;display: inline-block;">
              &nbsp;<i style="color: red;">{{department.meterNum}}个</i><br>
              &nbsp;<i style="color: black;font-style: normal;">监测单位</i>
            </label>
          </div>
          <div style="border: 1px solid lightgray;border-left: 0;width: 100%;">
            <label style="line-height: 58px;font-size: 40px;color: rgb(47, 156, 249);display: inline-block;">&nbsp;<i class="el-icon-orange"/></label>
            <label style="line-height: 20px;font-size: 13px;color: cadetblue;display: inline-block;">
              &nbsp;<i style="color: red;">{{department.areaSize}}</i><br>
              &nbsp;<i style="color: black;font-style: normal;">科室面积</i>
            </label>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="height: 120px;overflow: hidden;text-indent: 25px;">
          {{department.profile}}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="line-height: 40px;vertical-align: center;color: gray;">
          <i class="el-icon-location-information"/>湖北省武汉市江夏区
        </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<style>
.el-col {
  line-height: 20px;
  font-size: 13px;
  text-align: left;
}
</style>
